<template>
<div class="Group">
  <ul class="header__tab Group__header">
    <nuxt-link class="header__tab__item" exact-active-class="header__tab__item__active" tag="li" to="/permission">编辑用户</nuxt-link>
    <nuxt-link class="header__tab__item" exact-active-class="header__tab__item__active" tag="li" to="/permission/group">用户组权限</nuxt-link>
  </ul>
  <el-container class="Group__container">
    <el-aside style="width:136px">
      <ul class="Group__names">
        <li class="Group__names__first">用户组</li>
        <li class="Group__names__item"
        @click="handleClick(1)" :class="{'active':groupId==1}">管理员
          <el-dropdown class="Group__names__dropdown">
            <i class="el-icon-caret-bottom"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>

        <li class="Group__names__item"
          @click="handleClick(2)" :class="{'active':groupId==2}">用户组1
          <el-dropdown class="Group__names__dropdown">
            <i class="el-icon-caret-bottom"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
        <li class="Group__names__item"
          @click="handleClick(3)" :class="{'active':groupId==3}">用户组2
          <el-dropdown class="Group__names__dropdown">
            <i class="el-icon-caret-bottom"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
        <li class="Group__names__item">添加用户组</li>
      </ul>
    </el-aside>
    <el-main class="Group__main">
      <div class="Group__main__header">
        <span class="Group__main__header__colm3">全选</span>
        <span class="Group__main__header__colm1">操作对象</span>
        <span class="Group__main__header__colm2">权限</span>
      </div>
      <ul class="Group__main__list">
        <li class="Group__main__list__item">
          <el-checkbox class="Group__main__list__item__colm3" />
          <span class="Group__main__list__item__colm1">订单</span>
          <el-checkbox-group class="Group__main__list__item__colm2">
            <el-checkbox label="fh">发货</el-checkbox>
            <el-checkbox label="th">退款/换货</el-checkbox>
            <el-checkbox label="xg">修改订单</el-checkbox>
          </el-checkbox-group>
        </li>
        <li class="Group__main__list__item">
          <el-checkbox class="Group__main__list__item__colm3" />
          <span class="Group__main__list__item__colm1">服务</span>
          <el-checkbox-group class="Group__main__list__item__colm2">
            <el-checkbox label="fh">新增服务</el-checkbox>
            <el-checkbox label="th">删除服务</el-checkbox>
            <el-checkbox label="xg">编辑服务</el-checkbox>
          </el-checkbox-group>
        </li>
        <li class="Group__main__list__item">
          <el-checkbox class="Group__main__list__item__colm3" />
          <span class="Group__main__list__item__colm1">商品</span>
          <el-checkbox-group class="Group__main__list__item__colm2">
            <el-checkbox label="fh">新增商品</el-checkbox>
            <el-checkbox label="th">删除商品</el-checkbox>
            <el-checkbox label="xg">编辑商品</el-checkbox>
            <el-checkbox label="xg">上/下架</el-checkbox>
          </el-checkbox-group>
        </li>
      </ul>
      <div style="margin-top:120px; text-align:right;">
        <el-button type="primary" round>确定</el-button>
      </div>
    </el-main>
  </el-container>
</div>
</template>

<script>
  // 编辑用户模块
  export default {
    data() {
      return {
        groupId: 1
      }
    },
    methods: {
      handleClick(id) {
        this.groupId = id
      }
    }
  }
</script>

<style lang="scss" scoped>
.Group {
  height: 100%;
  position: relative;
  &__main {
    padding-left: 0;
    padding-top: 0;
    &__list {
      &__item {
        margin-bottom: 10px;
        line-height: 31px;
        padding: 13px;
        &:hover {
          background-color: #f5f6fa;
          box-shadow: 4px 7px 8px 1px rgba(0, 0, 0, 0.09);
          border-radius: 0px 20px 20px 0px;
        }
        &__colm1 {
          font-size: 16px;
          width: 95px;
          text-align: center;
          float: left;
        }
        &__colm2 {
          margin-left: 108px;
          margin-right: 45px;
          font-size: 16px;
          & /deep/ {
            .el-checkbox__label {
              font-size: 16px;
            }
            .el-checkbox {
              margin-left: 0;
              &:not(:last-child) {
                margin-right: 30px;
              }
            }
          }
        }
        &__colm3 {
          float: right;
          width: 32px;
          text-align: center;
          font-size: 16px;
        }
      }
    }
    &__header {
      padding: 26px 13px;
      line-height: 21px;
      span {
        color: #999999;
        font-size: 16px;
        display: inline-block;
      }
      &__colm1 {
        width: 95px;
        text-align: center;
      }
      &__colm2 {
        margin-left: 15px;
      }
      &__colm3 {
        float: right;
        width: 32px;
      }
    }
  }
  &__header {
    position: absolute;
    width: 100%;
  }
  &__container {
    background-color:#fff;
    height:100%;
    padding-top: 67px;
  }
  &__names {
    height: 100%;
    color: #999999;
    border-right: 1px solid #dadada;
    text-align: center;
    font-size: 16px;
    &__item {
      padding: 13px;
      cursor: pointer;
      margin-bottom: 10px;
      transition: all 200ms;
    }
    &__first {
      padding: 26px 13px;
    }
    .active {
      background-color: #409EFF;
      color: #fff;
      .Group__names__dropdown {
        color: #fff;
      }
    }
    &__dropdown {
      line-height: 21px;
      float: right;
    }
  }
}
</style>
